<template>
	<view class="container">
		<u-line></u-line>
		<input v-model="form.questTitle" class="title-input" placeholder="输入问题标题" />
		<textarea placeholder="写下你要讨论的问题" :auto-height="true" maxlength="-1" v-model="form.questContent"
			class="content-display"></textarea>
		<u-line></u-line>
		<!-- 上传图片 -->
		<block>
			<u-upload ref="uUpload" :size-type="['original']" name="Image" :max-count="4" :header="header"
				:action="uploadImgUrl" @on-uploaded="submit" :auto-upload="false"></u-upload>
		</block>
		<u-line></u-line>
		<view @click="chooseClass" class="choose-item">
			<u-icon class="icon add-icon" name="file-text-fill" color="#999" size="40"></u-icon>
			<text class="txt">{{ cateName || '选择问题分类' }}</text>
			<u-icon class="u-icon" name="arrow-right"></u-icon>
		</view>
		<view class="button-style">
			<u-button :custom-style="btnStyle" @click="uploadImg" shape="circle">消耗1个积分 发布问题</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					color: "#fff",
					backgroundColor: '#333333'
				},
				userInfo:"",
				uploadImgUrl: this.$c.domain + 'common/upload',
				form: {
					questTitle: '',
					questContent: '',
					userId: '',
					img: '',
				},
				cateName: '',
				header: {
					token: uni.getStorageSync('token')
				},

			};
		},
		onLoad(options) {
			this.getUserInfo();
			if (!uni.getStorageSync("hasLogin")) {
				this.$u.toast('请先登录哦');
			}
		},
		methods: {
			chooseClass() {
				uni.navigateTo({
					url: "category"
				})
			},
			uploadImg() {
				if (!this.form.questContent) {
					this.$u.toast('内容不能为空');
					return;
				}
				if (!this.form.questTitle) {
					this.$u.toast('标题不能为空');
					return;
				}

				uni.showLoading({
					mask: true,
					title: '发布中'
				});
				this.$refs.uUpload.upload();
			},
			getUserInfo() {
				this.$H.get('user/userInfo').then(res => {
					this.userInfo = res.result;
				});
			},
			submit(e) {
				uni.showLoading({
					mask: true,
					title: '发布中'
				});
				let mediaList = [];
				e.forEach(function(item, index) {
					mediaList.push(item.response.result);
				});
				
				this.form.img = mediaList[0];
				this.form.userId = this.userInfo.uid;
				this.$H.post('reply/add', this.form).then(res => {
					if (res.code == 0) {
						uni.switchTab({
							url: '/pages/replys/replys',
							success: (res) => {
								let page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.curSegment = 0;
								page.getList();
							},
						});
					}
					uni.hideLoading();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container{
		padding: 30rpx;
	}
	.title-input {
		border-bottom: 1px solid #F5F5F5;
		margin: 20rpx 0;
		padding: 20rpx 0;
	}

	.content-display {
		width: 100%;
		padding: 20rpx 0;
		min-height: 300rpx;
	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		&:last-child {
			border: 0;
		}

		.txt {
			margin-left: 20rpx;
		}

		.sw {
			margin-left: 300rpx;
		}

		.inputStyle {
			margin-left: 60rpx;
			width: 400rpx;
		}

		.radio {
			margin-left: 320rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.u-icon {
			margin-left: auto;
			color: #999;
		}

		.add-icon {
			margin-left: 0;
		}
	}

	.button-style {
		margin-top: 50rpx;
		color: #F4F4F5;
	}
</style>
